<template>
    <div>
        <search @getValue="getSonValue"></search>
        <div class="mainbox">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>通知公告</el-breadcrumb-item>
            </el-breadcrumb>

            <div class="content u-m-tb-30">
                <div class="content_left">
                    <div class="u-p-20 pointer" @click="changecurrent(index)" :class="current == index ? 'active' : ''"
                        v-for="(i, index) in noticelist ">
                        {{ i }}
                    </div>
                </div>
                <div class="content_right u-m-l-20">
                    <div class="content_right_item pointer" @click="todetail(i.id)" v-for="i in rendetrnoticelist">
                        <div class="content_text">
                            <p>{{i.title}}</p>
                            <p>{{i.updateTime}}</p>
                        </div>
                        <el-divider />
                    </div>
                   
                    <div class="pagniation">
                        <el-pagination background layout="prev, pager, next" :total="1000" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import search from './acl/search.vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { ref } from 'vue'
import {useRouter} from 'vue-router';
import { getnews,getnotice } from '@/api/user/index'

let $router = useRouter()
const noticelist = ['通知公告', '新闻动态']
const current = ref(0)
const getSonValue = (e: any) => {
    console.log(e);//子组件传入的值
}
const rendetrnoticelist:any = ref([])
const changecurrent = (index) => {
    current.value = index
    if (index == 0) {
        rendetrnoticelist.value = mynoticelist.value
    } else {
        rendetrnoticelist.value = newslist.value
    }
}
const todetail = (i) => {
    console.log(i);//子组件传入的值
    $router.push({
        path: '/noticedetail',
        query: {
            id: i,
            index:current.value
        },
    })
}
const mynoticelist = ref([])
const newslist = ref([])

const getnewslist = async () => {
    const res = await getnews(1,10)
    newslist.value = res.data.records
}
getnewslist()

const getnoticelist = async () => {
  const res = await getnotice(1,10)
  mynoticelist.value = res.data.records
  rendetrnoticelist.value = res.data.records
}
getnoticelist()

</script>

<style lang="scss" scoped>
@mixin flex {
    display: flex;
    align-items: center
}

.mainbox {
    width: 1180px;
    margin: 40px auto;

    .content {
        display: flex;

        .content_left {
            flex: 1;
            height: 700px;
            background-color: rgb(33, 121, 193);
            box-sizing: border-box;
            padding: 30px 20px;
            @include flex();
            flex-direction: column;
            font-size: 16px;

            .active {
                background-color: rgb(241, 241, 241);
                color: #2179c1;
                width: 100%;
                text-align: center;
            }
        }

        .content_right {
            flex: 5;
            position: relative;

            .content_text {
                @include flex();
                font-size: 14px;
                justify-content: space-between;
            }

        }
    }
}
</style>